<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="Stylesheet" type="text/css" href="Content/base.css" />
<link rel="Stylesheet" type="text/css" href="Content/blogPage.css" />
<link rel="Stylesheet" type="text/css"
	href="Content/blogPage_articles.css" />
<script type="text/javascript"
	src="${pageContext.request.contextPath }/script/jquery-1.10.2.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/script/jquery.validate.js"></script>
<script>
	$(function() {
		$("#form").validate({
			rules : {
				nickname : {
					required : true
				},
				"comment.content" : {
					required : true
				}
			},
			messages : {
				nickname : {
					required : "请输入昵称"
				},
				"comment.content" : {
					required : "请输入评论内容"
				}
			}
		});
	})
</script>
<style type="text/css">
* {
	list-style: none;
}

#pageNum a {
	border: 1px solid black;
	padding: 2px;
}

h3 {
	background: white;
	padding: 2px;
	text-indent: 2em
}

#comment td {
	padding: 5px 10px;
}

.sp {
	text-align: right;
}

label.error {
	color: red;
}

#publishComment {
	padding-top: 20px;
}

#form {
	margin-left: 10px;
}

#comment tr td img{width:60px;height: 60px;}

#form table td {
	padding: 10px 5px 0px 0px;
}
</style>
</head>
<body>
	<div id="page">
		<div id="blog">
			<div id="blogHead">
				<s:action name="header" namespace="/" executeResult="true"></s:action>
			</div>
			<div id="blogBody">
				<div id="sideCol">
					<s:action name="sidebar" namespace="/" executeResult="true"></s:action>
				</div>
				<div id="mainCol">
					<div class="mainCol-head">
						<span class="title">博文</span>
					</div>
					<div class="mainCol-body">
						<div id="articles">
							<div class="article">
								<h2 class="article-title">
									<a href="#">${article.title }</a>
								</h2>
								<div class="article-body">${article.content }</div>
								<div class="article-footer">
									${article.updateTime }<br /> 阅读（${article.clicks }）|
									评论（${article.commentTimes }）
								</div>
							</div>
							<div class="linedot"></div>
							<c:if test="${not empty comments }">
								<div id="comment">
									<h3>评论</h3>
									<c:forEach items="${comments }" var="c">
										<table>
											<tr>
												<td><strong>${c.user.nickname }</strong></td>
												<td class="sp">${c.commentTime }</td>

											</tr>
											<tr>
												<td><img
													src="${pageContext.request.contextPath }/UserFiles/UserHeads/${c.user.id }.jpg" /></td>
												<td>${c.content}</td>
											</tr>
										</table>
										<div class="linedot"></div>
									</c:forEach>
								</div>
							</c:if>
							<div id="publishComment">
								<c:if test="${not empty user }">
									<h3>发表评论</h3>
									<form action="addComment" method="post" id="form">
										<input type="hidden" value="${article.id }" name="articleId" />
										<table>
											<tr>
												<td>昵称：</td>
												<td><input type="text" name="nickname"
													value="${user.nickname }" /></td>
											</tr>
											<tr>
												<td>评论：</td>
												<td><textarea cols="40" rows="4" name="comment.content"></textarea></td>
											</tr>
											<tr>
												<td></td>
												<td><input type="submit" value="发表评论" /></td>
											</tr>
										</table>
									</form>
								</c:if>
							</div>
						</div>
					</div>
					<div class="mainCol-foot"></div>
				</div>

			</div>
			<div id="blogFoot"></div>
		</div>
	</div>
</body>
</html>